<script>
import ele from '@/assets/logo.png'
import { Fold, Expand } from '@element-plus/icons-vue'
//导入侧边栏 ,@是在vite.config.js中配置的是src的路径
//也就意味着以后要找src路径就可以直接使用@符号
import AsideCom from '@/components/AsideCom.vue'
import BreadcrumbCom from '@/components/BreadcrumbCom'

import { mapState, mapMutations } from 'vuex'
export default {
  data() {
    return {
      url: ele,
      // 标记当前侧边栏是展开还是收起
      collapse: false
    }
  },
  mounted() {
    // console.log(this.$store.state.userInfo.adminname);
    if (!this.$store.state.userInfo.adminname) {
      this.$router.push('/login')
    }
  },
  methods: {
    ...mapMutations(['updateUserInfo']),
    logout() {
      // 退出登录按钮的点击事件
      // 清除所有的本地的存储
      localStorage.clear()
      //清除全局状态管理中的userInfo
      this.updateUserInfo({})
      //重新跳转到登陆页面
      this.$router.push('/login')
    },
    setCount() {
      // console.log(this.$store);

      //commit是用来调用store中 mutations 中定义的方法
      // this.$store.commit('add')

      //dispatch是用来调用store中的 actions 中定义的方法
      // this.$store.dispatch('addActions')

      //传参
      // this.$store.commit('addNum',5)

      this.$store.dispatch('addNumActions', 10)
    }
  },
  computed: {
    ...mapState(['userInfo']),
    headerLeft() {
      return this.collapse ? 'Expand' : 'Fold'
    },
    asideWidth() {
      return this.collapse ? '54px' : '200px'
    }
  },
  // 局部注册组件
  components: {
    Fold,
    Expand,
    //注册侧边栏组件
    AsideCom,
    // 注册面包屑
    BreadcrumbCom
  }
}
</script>
<template>
  <div class="common-layout">
    <el-container>

      <!-- 左边侧边栏 -->
      <el-aside>
        <div class="logo-box">
          <el-image :src="url" style="width:60px;height:60px"></el-image>
          <h2 class="manage-title" v-show="!collapse">国网系统</h2>
        </div>
        <!-- 使用侧边栏组件 使用侧边栏的时候将是否展开的属性传递过去-->
        <AsideCom :collapse="collapse"></AsideCom>
      </el-aside>

      <!-- 右侧内容部分 -->
      <el-container>

        <!-- 头部 -->
        <el-header>
          <el-icon size="30" @click="collapse=!collapse">
            <component :is="headerLeft"></component>
          </el-icon>

          <!-- 没有登陆的情况下 -->
          <el-button v-if="!userInfo.adminname" @click="$router.push('/login')"> 请登录 </el-button>
          <!-- 有登录的情况下 -->
          <p v-else>
            <span style="margin-right:10px">欢迎:{{ userInfo.adminname }}</span>
            <el-button @click="logout"> 退出登录 </el-button>
          </p>
        </el-header>

        <!-- 主体内容部分 -->
        <el-main>
          <BreadcrumbCom></BreadcrumbCom>
          <!-- 第一种使用全局状态的方法 -->
          <!-- Main----------{{ $store.state.count }}-------欢迎{{ $store.state.userInfo.adminname }}
          <el-button @click="setCount">修改全局状态中的数据</el-button>
          <el-button @click="$router.push('/login')">修改全局状态中的数据</el-button> -->

          <!-- 配置的是二级路由的出口 -->
          <router-view></router-view>
        </el-main>

      </el-container>
    </el-container>
  </div>
</template>
<style lang="scss" scoped>
.el-container {
  background-color: #ffeaa7;
  .el-aside {
    background-color: #dff9fb;
    // 可以在sass中直接引用上面定义的值
    width: v-bind(asideWidth);
    transition: all 0.5s;
    // overflow: hidden;
    .logo-box {
      height: 60px;
      display: flex;
      align-items: center;
      // padding: 0 5px;
    }
    .manage-title {
      font-size: 20px;
      margin-left: 20px;
    }
  }
}
.el-header {
  background-color: #a5d8ff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-main {
  background-color: #f1f2f6;
  position: relative;
}
</style>